<!DOCTYPE html>

<html lang="en">
  <meta charset="utf-8" />
  <title>ICERender-transform-basic</title>
  <body>
    <div>
      <button id="btn-1">保存</button>
      <button id="btn-2">加载</button>
      <button id="btn-3">清除所有</button>
      <script src="../dist/index.umd.js"></script>
    </div>
    <br/>
    <canvas id="canvas-1" width="1024" height="768" style="background-color: #f7f7f7;"></canvas>
  </body>
  <script type="text/javascript">
        let ice = new ICE.ICE().init('canvas-1');

        document.querySelector('#btn-1').addEventListener('click', (evt) => {
          const jsonStr = ice.toJSONString();
          window.localStorage.setItem('json-data', jsonStr);
        });
        document.querySelector('#btn-2').addEventListener('click', (evt) => {
          const jsonStr = window.localStorage.getItem('json-data');
          ice.fromJSONString(jsonStr);
        });
        document.querySelector('#btn-3').addEventListener('click', (evt) => {
          console.log('ice.clearAll()');
          ice.clearAll();
        });
        
        let rect=new ICE.ICERect({
          left: 300,
          top: 300,
          width: 100,
          height: 100,
          style: {
            strokeStyle: '#ff3300',
            fillStyle: '#00ffff',
            lineWidth: 2,
          },
          transform: {
            translate: [10, -10],
            scale: [2, 2],
            skew: [25, 0],
            rotate: 45,
          },
        });
        ice.addChild(rect);
  </script>
</html>
